<template>
  <div class="map-main">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search='getSearch'
      />
    </form>
    <div class="maplist" :class="{anmit:showMapList}">
        <ul>
          <li v-for="item in listData.tempDat" :key="item.id"  @click="getName(item.name)">
            <span>{{item.name}}</span><span>{{item.district}}</span>
          </li>
        </ul>
    </div>
    <div id="map"></div>
  </div>
</template>
<script>
import { onMounted, ref, reactive, watch } from "vue";
import { initMap, newMap ,autoInput} from "../../untils/map";
export default {
  name: "homeMap",
  setup(props, ctx) {
    onMounted(() => {
      // 地图上的点
      initMap().then((res) => {
        newMap(res);
      });
    });
    //搜索框内容
    const value = ref("");
    const showMapList = ref(false)
    const listData = reactive({
      tempDat:{}
    })
    const getSearch = (val) => {
      autoInput(val).then(res=>{
      listData.tempDat = res.tips
      showMapList.value = true
      console.log(listData.tempDat);
      }) 
    };
    const getName = (val)=>{
      console.log(val);
      showMapList.value = false;
      value.value = ''
    }
    return {
      value,
      getSearch,
      showMapList,
      listData,
      getName
    };
  },
};
</script>
<style lang="scss" scoped>
.map-main {
  position: relative;
  .maplist{
    width: 96%;
    background-color: #fff;
    position: absolute;
    z-index: 999;
    transform: translate(2%,-130%);
    opacity: 0;
    ul{
      width: 80%;
      margin: 0 auto;
      li{
        height:30px;
        line-height: 30px;
        & :nth-child(2){
          margin-left: 20px;

        }
      }
    }
  }

  #map {
    width: 100vh;
    height: 400px;
  }
}
  .anmit{
    animation-name: show;
    animation-fill-mode: forwards;
   animation-duration: 1s;
   animation-timing-function: linear;
  }
  @keyframes show {
      from{ transform: translate(2%,-160%); opacity: 0;}
      to{transform: translate(2%,0);opacity: .8;}
  }
</style>